<template>
    <view class="pages">
        <z-paging ref="paging" :loading-more-enabled="false" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" v-model="viewModel" @query="getQuery">
            <view class="line"></view>
            <view class="contents">
                <u-swiper
                    :current="swiperIndex"
                    :loading="swiperList.length === 0"
                    :list="swiperList"
                    previousMargin="280rpx"
                    nextMargin="100rpx"
                    circular
                    :autoplay="false"
                    radius="5"
                    bgColor="#ffffff"
                    height="260rpx"
                    :displayMultipleItems="2"
                    @click="swiperChange"
                    @change="swiperChange"
                    imgMode="heightFix"
                ></u-swiper>
            </view>
            <title-components :cinemaModel="cinemaModel"></title-components>
            <view style="position: sticky; top: 0; background-color: #fff; z-index: 9">
                <tabs-components @change="tabsChange" :tabsList="tabsList" :tabIndex.sync="tabIndex"></tabs-components>
            </view>
            <!-- <u-gap height="30rpx" bgColor="#F6F6F6"></u-gap> -->
            <list-componets :cinemaModel="cinemaModel" :cinemaId="cinemaId" :filmList="filmList"></list-componets>
        </z-paging>
        <x-loading :show="isCheckEmpty(cinemaModel)"></x-loading>
    </view>
</template>

<script>
import { getCinemaShows } from '@/sub_pages/movie/common/api/movie.js';

import service from './service';
import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';
import titleComponents from './components/title.vue';
import tabsComponents from './components/tabs.vue';
import listComponets from './components/list.vue';
export default {
    components: { xLoading, titleComponents, tabsComponents, listComponets },
    data() {
        return {
            viewModel: [],
            cinemaId: '',
            swiperIndex: 0,
            rateValue: 1,
            maxCoupon: {},
            tabIndex: 0,
            options: {}
        };
    },
    computed: {
        cinemaModel() {
            return this.viewModel[this.swiperIndex] || {};
        },
        swiperList() {
            return this.viewModel.map(item => item.imgUrl) || [];
        },
        tabsList() {
            return service.getTabsList(this);
        },
        filmList() {
            let list = [];
            if (this.tabsList[this.tabIndex]) {
                list = service.getDataRateList(this);
            }
            return list;
        },
        defIds() {
            if (this.options.filmId) {
                return;
            }
            return '';
        },
    },
    onLoad(e) {
        this.options = e;
        this.cinemaId = e.id;

        this.setNavTitle(e.name);
    },
    methods: {
        async getQuery() {
            try {
                let para = {
                    cinemaId: this.cinemaId,
                };
                let res = await getCinemaShows(para);
                if (!res.data) {
                    uni.showToast({
                        title: '数据获取失败',
                        icon: 'none',
                    });
                    uni.navigateBack();
                    return false;
                }

                const resData = res.data;

                this.$refs.paging.complete(resData);
                this.$nextTick(() => {
                    if (this.options.filmId) {
                        let findIndex = resData.findIndex(r => r.filmId == this.options.filmId);
                        this.swiperIndex = findIndex > -1 && this.swiperIndex == 0 ? findIndex : 0;
                    }
                });
            } catch (e) {
                this.$refs.paging.complete(false);
            }
        },
        setNavTitle(title = '') {
            if (title) {
                uni.setNavigationBarTitle({ title });
            }
        },
        swiperChange(e) {
            this.swiperIndex = e.current ?? e;
            this.tabIndex = 0;
        },
        tabsChange() {},

        isCheckEmpty(obj) {
            return getApp().globalData.subcontracting_movie?.$utils?.isCheckEmpty(obj);
        },
    },
};
</script>

<style lang="scss" scoped>
.pages {
    .top {
        position: relative;
        padding: 30rpx;
        &-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 238rpx;
            z-index: -1;
            filter: blur(15rpx);
        }
        &-cont {
            position: relative;
            z-index: 1;
            margin-top: 138rpx;
            min-height: 100rpx;
            background: #ffffff;
            box-shadow: 0px 6rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
            border-radius: 15rpx;
            opacity: 1;
            padding: 30rpx;
        }
        &-name {
            @include font(32rpx, #333, bold);
        }
        &-tips {
            margin-top: 10rpx;
            @include font(26rpx, #666);
        }
    }
    .line {
        height: 30rpx;
    }
    .contents {
        height: 300rpx;
    }
}
@media screen and (min-width: 768px) {
	.contents {
		display: none;
	}
}
</style>
